// 富文本
<template>
  <div>
    <div class="rich-Text display-flex">
      <div class="pl10 pr10 rich-Text-gz" @click="DexecCommand('undo')">
        <n-tooltip trigger="hover">
          <template #trigger>
            <i class="iconfont dx-chexiao fz20"></i>
          </template>
          撤销
        </n-tooltip>
      </div>
      <div class="pl10 pr10 rich-Text-gz" @click="DexecCommand('redo')">
        <n-tooltip trigger="hover">
          <template #trigger>
            <i class="iconfont dx-chexiao fz20 ab"></i>
          </template>
          重做
        </n-tooltip>
      </div>
      <!-- <div class="pl10 pr10 rich-Text-gz" @click="DexecCommand('selectall')">
        <n-tooltip trigger="hover">
          <template #trigger>
            <i class="iconfont dx-quanxuan fz20 ab"></i>
          </template>
          全选
        </n-tooltip>
      </div> -->

      <div class="rich-Text-gz blm">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button class="ijkneert pl10 pr10" @click="DexecCommand('bold')">
              <i class="iconfont dx-zitijiacu fz20 ab"></i>
            </button>
          </template>
          加粗
        </n-tooltip>
      </div>
      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('forecolor', colorse)"
            >
              <i class="iconfont dx-font-colors fz20 ab"></i>
              <input type="color" class="color-input" v-model="colorse" />
            </button>
          </template>
          字体颜色
        </n-tooltip>
      </div>
      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('backColor', colorse)"
            >
              <i class="iconfont dx-beijingse fz20 ab"></i>
              <input type="color" class="color-input" v-model="colorse" />
            </button>
          </template>
          字体背景
        </n-tooltip>
      </div>
      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10 cz-context"
              @click="DexecCommand('backColor', colorse)"
            >
              <i class="iconfont dx-24gl-fontSize fz20 ab"></i>
              <div class="xialser bgff">
                <p
                  class=""
                  v-for="(item, idx) in options"
                  :key="idx"
                  @click="DexecCommand('fontSize', item.key)"
                >
                  <font :size="item.key">{{ item.label }}</font>
                </p>
              </div>
            </button>
          </template>
          字体大小
        </n-tooltip>
      </div>
      <div class="rich-Text-gz blm">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button class="ijkneert pl10 pr10" @click="DexecCommand('italic')">
              <i class="iconfont dx-zitixieti fz20 ab"></i>
            </button>
          </template>
          斜体
        </n-tooltip>
      </div>

      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('underline')"
            >
              <i class="iconfont dx-zitixiahuaxian fz20 ab"></i>
            </button>
          </template>
          下划线
        </n-tooltip>
      </div>

      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('removeFormat')"
            >
              <i class="iconfont dx-xiangpica fz20 ab"></i>
            </button>
          </template>
          清除格式
        </n-tooltip>
      </div>

      <div class="rich-Text-gz blm">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('justifyleft')"
            >
              <i class="iconfont dx-zuoduiqi fz20 ab"></i>
            </button>
          </template>
          左对齐
        </n-tooltip>
      </div>

      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('justifycenter')"
            >
              <i class="iconfont dx-juzhongduiqi fz20 ab"></i>
            </button>
          </template>
          居中
        </n-tooltip>
      </div>

      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('justifyright')"
            >
              <i class="iconfont dx-youduiqi fz20 ab"></i>
            </button>
          </template>
          右对齐
        </n-tooltip>
      </div>
      <div class="rich-Text-gz blm">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('insertOrderedList')"
            >
              <i class="iconfont dx-youxupailie fz20 ab"></i>
            </button>
          </template>
          有序队列
        </n-tooltip>
      </div>
      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('insertUnorderedList')"
            >
              <i class="iconfont dx-wuxupailie fz20 ab"></i>
            </button>
          </template>
          无序队列
        </n-tooltip>
      </div>
      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="DexecCommand('inserthorizontalrule')"
            >
              <i class="iconfont dx-wuxupailie fz20 ab"></i>
            </button>
          </template>
          插入横线
        </n-tooltip>
      </div>
      <!-- <div class="rich-Text-gz blm">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button class="ijkneert pl10 pr10" @click="DexecCommand('cut')">
              <i class="iconfont dx-jianqie fz20 ab"></i>
            </button>
          </template>
          剪切
        </n-tooltip>
      </div>
      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button class="ijkneert pl10 pr10" @click="DexecCommand('copy')">
              <i class="iconfont dx-fuzhi fz20 ab"></i>
            </button>
          </template>
          复制
        </n-tooltip>
      </div> -->
      <!-- <div class="rich-Text-gz blm">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="
                saveSelection();
                photoShowModal = true;
              "
            >
              <i class="iconfont dx-tupian1 fz20 ab"></i>
            </button>
          </template>
          上传图片
        </n-tooltip>
      </div> -->
      <!-- <div class="rich-Text-gz blm">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button
              class="ijkneert pl10 pr10"
              @click="
                saveSelection();
                photoShowModaler = true;
              "
            >
              <i class="iconfont dx-24gl-pictures fz20 ab"></i>
            </button>
          </template>
          轮播图
        </n-tooltip>
      </div> -->
      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button class="ijkneert pl10 pr10" @click="showPup">
              <i class="iconfont dx-icon- fz20 ab"></i>
            </button>
          </template>
          插入链接
        </n-tooltip>
      </div>
      <div class="rich-Text-gz">
        <n-tooltip trigger="hover">
          <template #trigger>
            <button class="ijkneert pl10 pr10" @click="setDate">
              <i class="iconfont dx-shijian fz20 ab"></i>
            </button>
          </template>
          当前时间
        </n-tooltip>
      </div>
    </div>

    <div class="fbe" ref="fwb" contenteditable="true"></div>

    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>图片库</div>
      </template>

      <div>
        <photoGallery @getImg="getImg" :isfwb="true"></photoGallery>
      </div>

      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>多张图片</div>
      </template>
      <div>
        <MorePictures @getImg="getImgList"></MorePictures>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImglist">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="clianjpup" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>超链接</div>
      </template>
      <n-form ref="formRef" :label-width="80">
        <n-form-item label="链接地址">
          <n-input placeholder="输入链接地址" v-model:value="hyperlink.url" />
        </n-form-item>
        <n-form-item label="显示的标题">
          <n-input
            placeholder="输入显示的标题"
            v-model:value="hyperlink.title"
          />
        </n-form-item>
        <n-form-item label="是否新窗口打开">
          <n-radio-group v-model:value="hyperlink.isopen" name="radiogroup">
            <div class="ddfrww">
              <n-radio value="1" name="是"> 是 </n-radio>
              <n-radio value="2" name="否"> 否 </n-radio>
            </div>
          </n-radio-group>
        </n-form-item>
      </n-form>
      <template #action>
        <div class="tr">
          <n-button @click="clianjpup = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setclianj">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { ref, onMounted } from "vue";
import photoGallery from "./photoGallery";
import MorePictures from "./MorePictures.vue";
import { transferTimeYMDHm } from "../../util/index";
const fwb = ref();
const clianjpup = ref(false);
const colorse = ref("");
const photoShowModal = ref(false);
const photoShowModaler = ref(false);
const hyperlink = ref({
  url: "",
  title: "",
  isopen: "1",
});
const hrefText = ref();
const DexecCommand = (text, cs?) => {
  document.execCommand(text, false, cs || null);
};
const options = [];
for (let i = 1; i < 7; i++) {
  options.push({
    label: "" + i,
    key: "" + i,
  });
}
let logoImg = null;
let imgW = null;
let imgH = null;
const getImg = (data) => {
  console.log(data);
  logoImg = data.src;
  imgW = data.width;
  imgH = data.height;
};
let imgList = [];
const getImgList = (data) => {
  imgList = data;
};
// 添加图片
const setImg = () => {
  restoreSelection();
  DexecCommand(
    "insertHTML",
    `<img src="${logoImg}" width=${imgW}   height=${imgH}>`
  );
  photoShowModal.value = false;
};

const setImglist = () => {
  restoreSelection();
  let jhnbse = "";
  imgList.map((a) => {
    jhnbse += `
    	<div class="swiper-slide" >
						<img src="${a}" class="w100 h100 dsfsderrer"/>
						<img src="${a}" class="w100 h100 dderrrtwe"/>
			</div>`;
  });
  DexecCommand(
    "insertHTML",
    `
      <div  class="red">
        <div class="tityher"><span>[轮播图]<br></span></div>
<div class="knmmkxeer">
  <div class="skjjhdee"> 
			<div class="swiper-container pm40">
				<div class="swiper-wrapper">

          ${jhnbse}
				
				</div>

				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
				<div class="swiper-pagination"></div>
			</div>
		</div>
    </div>
    `
  );
  photoShowModaler.value = false;
};

//添加超链接

const setclianj = () => {
  clianjpup.value = false;
  setTimeout(() => {
    restoreSelection();
    DexecCommand(
      "insertHTML",
      `<a href="${hyperlink.value.url}" target="${
        hyperlink.value.isopen == "1" ? true : false
      }" >${hyperlink.value.title}</a>`
    );
    hyperlink.value = {
      url: "",
      title: "",
      isopen: "1",
    };
  }, 100);
};
const showPup = () => {
  saveSelection();
  clianjpup.value = true;
};

let jjbse = null;
// 保存光标位置
const saveSelection = () => {
  if (window.getSelection) {
    const sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      console.log(sel.getRangeAt(0));
      jjbse = sel.getRangeAt(0);
      return sel.getRangeAt(0);
    }
  }
  return null;
};
// 重置光标位置
const restoreSelection = () => {
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(jjbse);
};
const setDate = () => {
  DexecCommand("insertText", "" + transferTimeYMDHm());
};

defineExpose({
  // 获取富文本里 的内容
  getHtml() {
    return fwb.value.innerHTML;
  },
  setHtml(text) {
    fwb.value.innerHTML = text;
  },
});
</script>
 <style scoped>
.fwbContext {
  width: 90%;
}
.fbe {
  height: 600px;
  border: 1px solid #e0e0e0;
  border-top: 0px;
  padding: 10px;
  padding-left: 20px;
  overflow: auto;
}
.xialser {
  position: absolute;
  left: 0;
  top: 36px;
  width: 100%;
  display: none;
  border: 1px solid #e0e0e0;
}
.xialser p {
  line-height: 30px;
  border-bottom: 1px solid #e0e0e0;
}
.xialser p:last-child {
  border: 0;
}
.cz-context:hover .xialser {
  display: block;
}
.color-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.rich-Text {
  border: 1px solid #e0e0e0;
  height: 40px;
  line-height: 40px;
}
.bgred {
  background: red;
}
.dx-chexiao.ab {
  display: inline-block;
  transform: rotate(90deg);
}
</style>